import * as React from 'react';
import MuiDrawer from '@mui/material/Drawer';
import Box from '@mui/material/Box';
import MuiAppBar from '@mui/material/AppBar';
import Toolbar from '@mui/material/Toolbar';
import List from '@mui/material/List';
import Typography from '@mui/material/Typography';
import Divider from '@mui/material/Divider';
import IconButton from '@mui/material/IconButton';
import Badge from '@mui/material/Badge';
import Container from '@mui/material/Container';
import Grid from '@mui/material/Grid';
import Paper from '@mui/material/Paper';
import Link from '@mui/material/Link';
import MenuIcon from '@mui/icons-material/Menu';
import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
import NotificationsIcon from '@mui/icons-material/Notifications';
import Menu from '@mui/material/Menu';
import MenuItem from '@mui/material/MenuItem';

import { logout } from '@@/api/login';





const ProfileMenu = () => {

    const [anchorEl, setAnchorEl] = React.useState(null);
    const openRightMenu = Boolean(anchorEl)

    const handleClick = (event) => {
        setAnchorEl(event.currentTarget)
    }

    const handleMenuClose = () => {
        setAnchorEl(null)
    }

    const handleLogout = async () => {
        if (confirm(`你确定要退出系统吗？`)) {

            let data = await logout()
            // console.log(data)

            if (data.code === 0) {
                setAnchorEl(null)
                localStorage.removeItem('access_token')
                document.cookie = ''

                window.location.href = `${window.location.origin}${window.location.pathname}#/login`
            }
        }
    }


    return (
        <>
            <div>
                <IconButton color="inherit" onClick={handleClick}>
                    <Badge color="secondary">
                        <NotificationsIcon />
                    </Badge>
                </IconButton>

                <Menu
                    id="basic-menu"
                    anchorEl={anchorEl}
                    open={openRightMenu}
                    onClose={handleMenuClose}
                    MenuListProps={{
                        'aria-labelledby': 'basic-button',
                    }}
                >
                    <MenuItem onClick={handleLogout}>Logout</MenuItem>
                </Menu>
            </div>
        </>
    )
}
export default ProfileMenu
